<template>
	<view>
		<cu-custom bgColor="theme-bg-color" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改个人信息</block>
		</cu-custom>
		<form v-if='formData!=null'>

			<view class="cu-form-group">
				<view class="title">名称</view>
				<input placeholder="请输入名称" name="name" v-model="formData.Name"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">邮箱</view>
				<input placeholder="请输入邮箱" name="email" v-model="formData.Email"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input placeholder="请输入手机号码" name="input" v-model="formData.PhoneNumber"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">个人地址</view>
				<input placeholder="请输入个人地址" name="input" v-model="formData.Address"></input>
			</view>

			<cu-date-picker title='出生日期' v-model="formData.Birth"></cu-date-picker>
			<cu-upload-image limit="1" v-model="formData.ImageUrls"></cu-upload-image>


			<view class="padding margin-top">
				<button class="cu-btn block theme-bg-color margin-tb-sm lg" @click="Save(0)">保 存</button>

			</view>
		</form>
	</view>
</template>

<script>
	import store from "@/store";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {

				formData: null
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		async onLoad() {

		},	
		async onShow() {

			this.formData = await this.$store.dispatch("UserInfoByToken");
		},
		methods: {

			async Save() {
				let confirm = await this.$comm.ShowModal("你确定要修改用户信息吗?");

				if (confirm == false) {
					await this.$comm.ShowToast("用户放弃操作");
					return;
				}
				let {
					Data,
					Success,
				} = await this.$http.PostAsync("/User/CreateOrEdit", this.formData);
				if (Success) {
					await this.$comm.ShowToast("修改成功");
					await this.$comm.ReturnPage();
				}
			}

		}
	}
</script>

<style scoped>
	.publish {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #1CBBB4;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		position: fixed;
		right: 30upx;
		bottom: 150upx;
	}
</style>